<!--
 * @Date: 2024-09-06 17:48:26
 * @Author: Yu Weifeng weifeng.yu@gientech.com
 * @Description: 箱线图
-->
<template>
  <ChartBase :options="chartOptions" :currentEcharts="echarts" class="lc-chart__box-plot" />
</template>
<script setup>
import { chartProps } from '../base.ts';
import { computed } from 'vue';
import ChartBase from '../base.vue';
import { isEmpty, isObject } from 'lodash-es';
/******* echarts *********/
import * as echarts from 'echarts/core';
import {
  TitleComponent,
  DatasetComponent,
  ToolboxComponent,
  TooltipComponent,
  GridComponent,
  LegendComponent
} from 'echarts/components';
import { BoxplotChart } from 'echarts/charts';
import { UniversalTransition } from 'echarts/features';
import { CanvasRenderer } from 'echarts/renderers';

echarts.use([
  TitleComponent,
  DatasetComponent,
  ToolboxComponent,
  TooltipComponent,
  GridComponent,
  LegendComponent,
  BoxplotChart,
  CanvasRenderer,
  UniversalTransition
]);

defineOptions({
  name: 'LcChartBoxPlot'
});
const props = defineProps(chartProps);

const processData = (data, mapOptions) => {
  if (data.length) {
    let transformData = [];
    // 设置了映射字段 或者 数据里有name和value字段
    if (!isEmpty(mapOptions) || (isObject(data[0]) && data[0]['name'] && data[0]['value'])) {
      let groupData = {};

      if ((mapOptions && mapOptions.type) || data[0]['type']) {
        data.forEach((item) => {
          //分组
          const groupType = item[mapOptions?.type || 'type'];
          groupData[groupType] = groupData[groupType] ?? [];
          groupData[groupType].push(item);
        });
      } else {
        groupData = { boxplot: data };
      }
      Object.keys(groupData).forEach((group) => {
        const dimensionGroup = {};
        groupData[group].forEach((item) => {
          // x轴
          const dimensionGroupType = item[mapOptions?.dimension || 'name'];
          dimensionGroup[dimensionGroupType] = dimensionGroup[dimensionGroupType] ?? [];
          dimensionGroup[dimensionGroupType].push(item);
        });
        let groupValue = [];
        Object.keys(dimensionGroup).forEach((dimensionGroupType) => {
          groupValue.push([
            dimensionGroupType,
            ...dimensionGroup[dimensionGroupType].map(
              (item) => item[mapOptions?.valueMap || 'value']
            )
          ]);
        });
        transformData.push({ name: group, value: groupValue });
      });
    } else {
      transformData = data;
    }
    return transformData;
  } else {
    return [];
  }
};
const chartOptions = computed(() => {
  const options = props.options;
  const processedData = processData(props.data, props.mapOptions);
  // 没有分组信息时，不需要显示legend
  processedData.length < 2 && delete options.legend;
  options.series = processedData.map((data, index) => ({
    name: data.name,
    ...options.series,
    datasetIndex: index
  }));
  return Object.assign({}, options, {
    dataset: processedData.map((data) => ({
      source: data.value
    }))
  });
});
</script>
